<template>
  <div>
    <div class="ht-search-form" style="margin-top: 6px">
      <p class="ht-form-title">移库信息</p>
      <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">合酒单号</div>
          <div class="ht-de-content">
            {{ state.initData.orderNo }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">申请班组</div>
          <div class="ht-de-content">
            {{ state.initData.receivedWineDepartName }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">申请人</div>
          <div class="ht-de-content">
            {{ state.initData.applyer }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">创建时间</div>
          <div class="ht-de-content">
            {{ state.initData.creationTime?.replace('T', ' ').slice(0, 16) }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">合酒状态</div>
          <div class="ht-de-content">
            <Status :color="status(state.initData.status)?.color">{{
              status(state.initData.status)?.title
            }}</Status>
          </div>
        </el-col>
      </el-row>
      <p class="ht-form-title">合酒酒品</p>
      <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">酒品名称</div>
          <div class="ht-de-content">
            {{ state.initData.mixWineBreedSapName }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">酒品代码</div>
          <div class="ht-de-content">
            {{ state.initData.mixWineBreedSapCode }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">生产年月</div>
          <div class="ht-de-content">
            {{
              state.initData?.mixWineBreedManuDate
                ?.replace('T', ' ')
                .slice(0, 7) || '--'
            }}
          </div>
        </el-col>
      </el-row>
      <p class="ht-form-title">确认信息</p>
      <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">确认班组</div>
          <div class="ht-de-content">
            {{ state.initData.confirmWorkGroup }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">确认人</div>
          <div class="ht-de-content">
            {{ state.initData.confirmer }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">确认时间</div>
          <div class="ht-de-content">
            {{ state.initData.confirmTime?.replace('T', ' ').slice(0, 16) }}
          </div>
        </el-col>
      </el-row>
      <p class="ht-form-title">合酒明细</p>
    </div>

    <ht-table
      class="ht-table-no-border"
      :data="state.initData.containers"
      style="width: 100%; margin-top: 12px"
      border
      highlight-current-row
      :hide-page="true"
      :hide-order="true"
      :columns="columns"
    >
      <Temp slot="empty">
        <span slot="tips">暂无数据哦</span>
      </Temp>

      <template slot="mixWineType" slot-scope="{ row }">
        <span v-if="row.mixWineType == 0">移入</span>
        <span>移出</span>
      </template>
    </ht-table>
  </div>
</template>
<script lang="ts">
import MyTemp from './myTemp.vue';
import { Component, Vue } from 'vue-property-decorator';
import Temp from '@/components/temp.vue';
import { Column } from 'htui-yllkbz/src/packages/type';
import { MixWineOrderDto } from '@/plugins/api';
import Status from '@/components/status.vue';
interface State {
  /** 数据状态 */
  loading: boolean;
  activeName: any;
  dataSource: any;
  initData: MixWineOrderDto;
}
@Component({
  components: {
    MyTemp,
    Temp,
    Status,
  },
})
export default class Index extends Vue {
  /** 数据 */
  state: State = {
    loading: false,
    activeName: 'second',
    dataSource: [],
    initData: new MixWineOrderDto(),
  };
  /** 生命周期 */

  //初始化数据
  initData(val: MixWineOrderDto) {
    this.state.initData = val;
  }
  //获取和酒状态
  status(val: number) {
    const arr = [
      { title: '待确认合酒', key: 0, color: '#E2B236' },
      { title: '待扫码开始', key: 1, color: '#E2B236' },
      { title: '合酒执行中', key: 2, color: 'var(--primary)' },
      { title: '待扫码结束', key: 3, color: '#E2B236' },
      { title: '已完成合酒', key: 4, color: '#CACECB' },
    ];

    return arr.find((item: any) => item.key == val);
  }
  /** 监听 */

  get columns(): Column[] {
    return [
      { key: 'containerTypeStr', title: '类型' },
      { key: 'factoryName', title: '厂区' },
      //
      { key: 'wineWareHouse', title: '酒库' },

      { key: 'outSapName', title: '容器' },
      { key: 'outSapCode', title: '容器编号' },
      //

      { key: 'weight', title: '原度数量' },
      { key: 'convertValue', title: '折60°数量' },
      //
    ];
  }

  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
